<template>
	 <cover-view :class="fixed ? 'cmd-nav-bar-fixed' : ''" :style="setBackgroundColor">
		<cover-view class="status-bar"></cover-view>
		 <cover-view class="cmd-nav-bar">
			 <!-- 左侧图标 -->
			<cover-view class="cmd-nav-bar-left" @tap="goBack">
				<cover-image class="image" :src="backIcon"></cover-image>
				<!-- <cover-view class="iconfont icon-arrow-left"></cover-view> -->
			</cover-view>
			<!-- 标题 -->
			<cover-view class="cmd-nav-bar-title" :style="'color:'+setFontColor">{{setCenterTitle}}</cover-view>
		 </cover-view>
	 </cover-view>
</template>

<script>
	export default {
		props: {
			/**
			 * 固定到页面顶部
			 */
			fixed: {
			  type: Boolean,
			  default: true
			},
			/**
			 * 导航栏背景颜色
			 */
			backgroundColor: {
			  type: String,
			  default: ''
			},
			/**
			 * 文字图标颜色
			 */
			fontColor: {
			  type: String,
			  default: ''
			},
			/**
			 * 导航栏标题
			 */
			title: {
			  type: String,
			  default: ''
			},
			/**
			 * 导航栏左侧返回按钮，默认点击返回上层
			 */
			back: {
			  type: Boolean,
			  default: false
			}			
		},
		computed: {
			/**
			 * 设置中心标题
			 */
			setCenterTitle() {
			  let centerTitle = '';
			  if (this.title) {
			    if (this.title.length > 8) {
			      centerTitle = this.title.slice(0, 6) + '...';
			    } else {
			      centerTitle = this.title;
			    }
			  }
			  return centerTitle;
			},
			/**
			 * 设置标题图标颜色
			 */
			setFontColor() {
			  let fontColor = '#fff';
			  if (this.fontColor) {
			    fontColor = this.fontColor;
			  }
			  return fontColor;
			},
			/**
			 * 设置背景颜色
			 */
			setBackgroundColor() {
			  let backgroundColor = '#1DD3B8';
			  if (this.backgroundColor) {
			    backgroundColor = `background: ${this.backgroundColor};`;
			  }
			  return backgroundColor;
			}
			
		},
		data() {
			return {
				backIcon: '../../static/image/monitor/icon-back.png'
			}
		},
		methods: {
			/**
			 * 图标一点击事件
			 */
			// $_iconOneClick() {
			//   if (this.back) {
			//     uni.navigateBack()
			//   } else {
			//     this.$emit("iconOne");
			//   }
			// }
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	/* 固定到页面顶部 */
	.cmd-nav-bar-fixed {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  width: 100%;
	  z-index: 1000;
	  background: #57E6CA;
	  
	}
	/*沉浸状态栏变化*/
	.status-bar {
	  box-sizing: border-box;
	  display: block;
	  width: 100%;
	  margin-bottom: -3rpx;
	  height: var(--status-bar-height);
	  line-height: var(--status-bar-height);
	  background: transparent;
	}
	/*导航栏默认*/
	.cmd-nav-bar {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 92rpx;
	  line-height: 92rpx;
	  color: #000;
	  background: transparent;
	  padding: 0 24rpx;
	  position: relative;
	  // box-shadow: 0 6rpx 6rpx -3rpx rgba(0, 0, 0, 0.2);
	}
	/*所有都垂直占比*/
	.cmd-nav-bar-left,
	.cmd-nav-bar-title {
	  // flex: 1;
	  // height: 100%;
	  // display: flex;
	  // align-items: center;
	}
	
	/*左侧*/
	.cmd-nav-bar-left {
		position: absolute;
		left: 24rpx;
		font-size: 32rpx;
	  // padding-left: 30rpx;
	  .image {
		  width: 24rpx;
		  height: 38rpx;
	  }
	}
	
	/*标题部分 */
	.cmd-nav-bar-title {
	  justify-content: center;
	  font-size: 32rpx;
	  // overflow: hidden;
	  // text-overflow: ellipsis;
	  white-space: nowrap;
	}
	
</style>
